<template>
  <div class="pane">
    <div class="head padding">
      <div class="head-item">{{ $t('买盘数量') }}</div>
      <div class="head-item center">{{ $t('价格') }}</div>
      <div class="head-item right">{{ $t('卖盘数量') }}</div>
    </div>
    <div class="body padding">
      <div class="list">
        <div v-for="(item, index) in (realTimeDepth[symbol] && realTimeDepth[symbol].bids)" :key="`bids-${index}`" class="row">
          <span class="color-white">{{ item[1] | numberFormat() }}</span>
          <span class="green">{{ item[0] | numberFormat() }}</span>
        </div>
      </div>
      <div class="center-space"></div>
      <div class="list">
        <div v-for="(item, index) in (realTimeDepth[symbol] && realTimeDepth[symbol].asks)" :key="`asks-${index}`" class="row">
          <span class="red">{{ item[0] | numberFormat() }}</span>
          <span class="center-space"></span>
          <span class="color-white">{{ item[1] | numberFormat() }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState({
      symbol: ({ exchange }) => exchange.symbol,
      realTimeDepth: ({ exchange }) => exchange.realTimeDepth
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  },
  beforeMount () {
    this.subscribeDepth({
      symbol: this.symbol,
      interval: this.coinPair.interval
    })
  },
  methods: {
    ...mapActions({
      subscribeDepth: 'exchange/subscribeDepth'
    })
  }
}
</script>
<style scoped>
.padding {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
.head {
  display: flex;
  clear: both;
  height: 28px;
  justify-content: space-between;
  align-items: center;
}
.head-item {
  flex: 1;
  color: #929db1;
}
.head-item.center {
  text-align: center;
}
.head-item.right {
  text-align: right;
}
.body {
  clear:both;
  display: flex;
  height: 600px;
  overflow-y: auto;
}
.list {
  flex: 1;
}
.row {
  clear: both;
  display: flex;
  height: 26px;
  justify-content: space-between;
  align-items: center;
}
.center-space {
  display: inline-block;
  padding-left: 6px;
}
.green {
  color: #04ad90;
}
.red {
  color: #d14b64;
}
.color-white {
  color: white;
}
</style>
